<!DOCTYPE html>
<!-- 
Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 4
Author: KeenThemes
Website: http://www.keenthemes.com/
Contact: support@keenthemes.com
Follow: www.twitter.com/keenthemes
Dribbble: www.dribbble.com/keenthemes
Like: www.facebook.com/keenthemes
Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
Renew Support: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
-->
<html lang="en" >
<!-- begin::Head -->
<head>
	<meta charset="utf-8" />
	<title>
		
	</title>
	<meta name="description" content="">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<!--begin::Web font -->

	<!--end::Web font -->
	<!--begin::Base Styles -->  
	<!--begin::Page Vendors -->
	<!--end::Page Vendors -->
	<link href="views/app/assets/vendors/custom/datatables/datatables.bundle.css" rel="stylesheet" type="text/css" />

	<!--end::Base Styles -->
</head>
<!-- end::Head -->
<!-- end::Body -->
<body  class="m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default" >
	<!-- begin:: Page -->
	<div class="m-grid m-grid--hor m-grid--root m-page" style="min-height:100vh">
		<!-- BEGIN: Header -->
		<header id="m_header" class="m-grid__item    m-header "  m-minimize-offset="200" m-minimize-mobile-offset="200" >
			<div class="m-container m-container--fluid m-container--full-height">
				<div class="m-stack m-stack--ver m-stack--desktop">
					<!-- BEGIN: Brand -->
					<div class="m-stack__item m-brand  m-brand--skin-dark ">
						<div class="m-stack m-stack--ver m-stack--general">
							<div class="m-stack__item m-stack__item--middle m-brand__logo">
<a href="index.html" class="m-brand__logo-wrapper">
										<img alt="" src="image/static/home.png"/> 
									</a>
							</div>
							<div class="m-stack__item m-stack__item--middle m-brand__tools">
								<!-- BEGIN: Left Aside Minimize Toggle -->
								<a href="javascript:;" id="m_aside_left_minimize_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-desktop-inline-block 
								">
								<span></span>
							</a>
							<!-- END -->
							<!-- BEGIN: Responsive Aside Left Menu Toggler -->
							<a href="javascript:;" id="m_aside_left_offcanvas_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-tablet-and-mobile-inline-block">
								<span></span>
							</a>
							<!-- END -->
							<!-- BEGIN: Responsive Header Menu Toggler -->
							<a id="m_aside_header_menu_mobile_toggle" href="javascript:;" class="m-brand__icon m-brand__toggler m--visible-tablet-and-mobile-inline-block">
								<span></span>
							</a>
							<!-- END -->
							<!-- BEGIN: Topbar Toggler -->
							<a id="m_aside_header_topbar_mobile_toggle" href="javascript:;" class="m-brand__icon m--visible-tablet-and-mobile-inline-block">
								<i class="flaticon-more"></i>
							</a>
							<!-- BEGIN: Topbar Toggler -->
						</div>
					</div>
				</div>
				<!-- END: Brand -->
				<div class="m-stack__item m-stack__item--fluid m-header-head" id="m_header_nav">
					<!-- BEGIN: Horizontal Menu -->
					<button class="m-aside-header-menu-mobile-close  m-aside-header-menu-mobile-close--skin-dark " id="m_aside_header_menu_mobile_close_btn">
						<i class="la la-close"></i>
					</button>
					<top-bar></top-bar>
					<!-- END: Horizontal Menu -->								<!-- BEGIN: Topbar -->

				</div>
			</header>
			<!-- END: Header -->		
			<!-- begin::Body -->
			<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver-desktop m-grid--desktop m-body">
				<!-- BEGIN: Left Aside -->
				<button class="m-aside-left-close  m-aside-left-close--skin-dark " id="m_aside_left_close_btn">
					<i class="la la-close"></i>
				</button>
				<div id="m_aside_left" class="m-grid__item	m-aside-left  m-aside-left--skin-dark ">
					<!-- BEGIN: Aside Menu -->
					<side-bar></side-bar>
					<!-- END: Aside Menu -->
				</div>
				<!-- END: Left Aside -->
				<div class="m-grid__item m-grid__item--fluid m-wrapper">
					<!-- BEGIN: Subheader -->
					<div class="m-subheader ">
						<div class="d-flex align-items-center">
							<div class="mr-auto">
								<h3 class="m-subheader__title m-subheader__title--separator">
									行政管理
								</h3>
								<ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
									<li class="m-nav__item m-nav__item--home">
										<a href="/" class="m-nav__link m-nav__link--icon">
											<i class="m-nav__link-icon la la-home"></i>
										</a>
									</li>
									<li class="m-nav__separator">
										-
									</li>
									<li class="m-nav__item">
										<a href="" class="m-nav__link">
											<span class="m-nav__link-text">
												行政管理
											</span>
										</a>
									</li>
									<li class="m-nav__separator">
										-
									</li>
									<li class="m-nav__item">
										<a href="" class="m-nav__link">
											<span class="m-nav__link-text">
												员工通讯录
											</span>
										</a>
									</li>

								</ul>
							</div>
							<drop-down></drop-down>
						</div>
					</div>
					<!-- END: Subheader -->
					<div class="m-content">

						<div class="m-portlet m-portlet--mobile">
							<div class="m-portlet__head">
								<div class="m-portlet__head-caption">
									<div class="m-portlet__head-title">
										<h3 class="m-portlet__head-text">
											员工通讯录
										</h3>
									</div>
								</div>

								<div class="m-portlet__head-tools">
									<!-- <ul class="m-portlet__nav">
										<li class="m-portlet__nav-item" ng-click="export()">
											<div href="" class="btn btn-primary m-btn m-btn--custom m-btn--icon m-btn--air">
												<span>
													
													<span>
														导出客户列表
													</span>
												</span>
											</div>
										</li>
									</ul> -->
									<ul class="m-portlet__nav">
										<li class="m-portlet__nav-item">
											<a href="/staff_change" class="btn btn-primary m-btn m-btn--custom m-btn--icon m-btn--air">
												<span>
													<i class="la la-plus"></i>
													<span>
														添加员工
													</span>
												</span>
											</a>
										</li>
									</ul>
								</div>

							</div>
							<div class="m-portlet__body">
								<!--begin: Datatable -->
								<div class="row">
									<div class="col-sm-12 col-md-6" style="margin-bottom: 20px">
										<div id="m_table_1_filter" class="dataTables_filter">
											<input type="search" class="form-control form-control-sm" placeholder="输入用户名字或手机号" aria-controls="m_table_1" style="float:left;width: 50%;height: 37px" ng-model="keyword">
												<button class="btn btn-brand m-btn m-btn--icon" id="m_search" style="margin-left:20px;">
													<span ng-click="search()">
														<i class="la la-search"></i>
															<span >
																搜索
															</span>
														</span>
												</button>
										</div>
									</div>
									<div class="col-sm-12 col-md-6" style="clear: both">

									</div>
								</div>

								<table class="table table-striped- table-bordered table-hover table-checkable" id="m_table_1">
									<thead>
										<tr style="font-size:16px">
											<th>
												<b>员工姓名</b>
											</th>
											<th>
												<b>联系电话</b>
											</th>
											<th>
												<b>联系地址</b>
											</th>
											<th>
												<b>入职时间</b>
											</th>
											<th ng-click="sort(0)">
												<b>生日日期</b>
											</th>
											<th>
												<b>员工职位</b>
											</th>
											<th>
												<b>剩余假期</b>
											</th>
											<th>
												<b>管理班级</b>
											</th>
													
											<th>
												<b>操作</b>
											</th>
										</tr>
									</thead>
									<tbody>
										<tr ng-repeat='item in userData'>
											<td>
												{{item.name}}
											</td>
											<td>
												{{item.cellphoneText}}
											</td>											
											<td>
												{{item.nickName}}
											</td>
											<td>
												<img src="{{item.avatar}}" style="width: 25px;height: 25px"></img>	 
											</td>

											<td>
												{{item.deposit}}元
											</td>
											<td>
												{{item.addDateText}}
											</td>
											<td>
												{{item.addDateText}}
											</td>
											<td>
												{{item.addDateText}}
											</td>

											<td nowrap>
												<a class="m-portlet__nav-link btn m-btn m-btn--hover-brand m-btn--icon m-btn--icon-only m-btn--pill" title="修改" ng-click="edit($index)">
													<i class="la la-edit"></i>
												</a>
												<a class="m-portlet__nav-link btn m-btn m-btn--hover-brand m-btn--icon m-btn--icon-only m-btn--pill" title="删除" ng-click="remove($index)">
													<i class="la la-remove"></i>
												</a>
											</td>												
										</tr>



									</tbody>
									
								</table>
							</div>
							<div class="row">
								<div class="col-sm-12 col-md-5">
									<div class="dataTables_info">

									</div>
								</div>

								<div class="col-sm-12 col-md-7">

									<div class="dataTables_paginate paging_simple_numbers">
										<ul class="pagination">
												<li class="paginate_button page-item previous" id="page_left" ng-class="{'disabled':left}" ng-click="prevPage()">
												<a href="#" aria-controls="m_table_1" data-dt-idx="0" tabindex="0" class="page-link">
													<i class="la la-angle-left"></i></a></li>
												<li class="paginate_button page-item " ng-repeat="item in pages" id="pageIndex{{item.index}}" ng-class="{'active':item.active}" ng-click="changePage(item.index)">
													<a aria-controls="m_table_{{$index}}" data-dt-idx="{{$index}}" tabindex="0" class="page-link" >{{item.index}}</a>
												</li>
												
												<li class="paginate_button page-item next" ng-class="{'disabled':right}" ng-click="nextPage()">
												<a href="#" aria-controls="m_table_1" data-dt-idx="6" tabindex="0" class="page-link" id="page_right" >
													<i class="la la-angle-right"></i>
												</a>
											</li>
										</ul>
									</div>
								</div>
							</div>

						</div>
						<!-- END EXAMPLE TABLE PORTLET-->
					</div>
				</div>
			</div>
			<!-- end:: Body -->
			<!-- begin::Footer -->
			<bottom-footer></bottom-footer>
			<!-- end::Footer -->
		</div>
		<!-- end:: Page -->
		<!-- begin::Quick Sidebar -->
		
		<!-- end::Quick Sidebar -->		    
		<!-- begin::Scroll Top -->
		<div id="m_scroll_top" class="m-scroll-top">
			<i class="la la-arrow-up"></i>
		</div>
		<!-- end::Scroll Top -->		    <!-- begin::Quick Nav -->

		<!-- begin::Quick Nav -->	
		<!--begin::Base Scripts -->

		<!--end::Page Resources -->

	</body>
	<!-- end::Body -->
	<script type="text/javascript" src="js/filesaver.js"></script>

	</html>
